<template>
  <div class="top-menu" ref="topMenu" >
    <el-menu :default-active="activeIndex + ''" ref="elMenuDom" background-color="#021429" text-color="#fff"
          active-text-color="#fff"
          mode="horizontal">
      <template v-for="(item,index) in items">
        <el-menu-item :index="index+''"
                      @click.native="openMenu(index,item)"
                      :key="index" v-show="!item.hide" >
          <template slot="title">
            <i :class="item.f_Icon"></i>
            <span>{{$t(item.f_FullName)}}</span>
          </template>
        </el-menu-item>
      </template>
      <el-submenu v-if="subItems.length > 0" index="1000" popper-class="top-more-menu" >
        <template slot="title"><i class="el-icon-more"></i></template>
        <template v-for="(item,index) in subItems">
          <el-menu-item :index="'1000'+ index"
                        @click.native="openMenu(items.length+ index + 1,item)"
                        :key="'1000'+ index">
            <template slot="title">
              <i :class="item.f_Icon"></i>
              <span>{{$t(item.f_FullName)}}</span>
            </template>
          </el-menu-item>
        </template>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
/*const getWidth = elem => {
  let width =
    elem && typeof elem.getBoundingClientRect === 'function' && elem.getBoundingClientRect().width;
  if (width) {
    width = +width.toFixed(6);
  }
  return width || 0;
};*/


export default {
  name: "top-menu",
  data () {
    return {
      activeIndex: 0,
      subItems:[],
      menuIndex:0,
    };
  },
  inject: ["top"],
  created () {
    //this.getMenu();
  },
  mounted(){
  },
  computed: {
    ...mapGetters(["tagCurrent", "modulesGroup","screen"]),
    items(){
      const modules = this.modulesGroup['0'] || [];
      const res = modules.filter(item =>{
        if(item.f_EnabledMark == 1 && item.f_IsMenu == 1){
          if(this.loginInfo.f_SecurityLevel == 1){
            return true;
          }
          else{
            const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
            if(moduleAuthIds.indexOf(item.f_ModuleId) > -1){
              return true;
            }
            else{
              return false;
            }
          }
        }
      });
      return res;
    }
  },
  watch: {
    screen: function (val) {
      this.setChildrenWidthAndResize(val);
    }
  },
  methods: {
    openMenu (index,item) {
      this.menuIndex = index;
      this.$store.commit('system/module/setMenu', this.modulesGroup[item.f_ModuleId] || []);
    },
    initTopMenu(){
      this.$nextTick(() => {
        setTimeout(()=>{
          let _index = 0;
          if(this.items && this.items.length >0){
            this.items.forEach(item =>{
              item.hide = false;
            })
            this.openMenu(this.menuIndex,this.items[this.menuIndex])
          }
          if(this.$refs.elMenuDom){
            this.$refs.elMenuDom.$children.forEach(() => {
                var item = this.items[_index]
                if(item){
                  //item.width = getWidth(ele.$el)
                  _index++;
                }
            });
          }
          
          //this.setChildrenWidthAndResize(this.screen);
        },10)
      })
    },
    setChildrenWidthAndResize () {//bodyWidth
      
        /*let menuWidth = bodyWidth - getWidth(this.top.$refs.topLogo) - 232 -176 -8;
        let _menuWidth = 0;
        let _subItems = [];
        let len = this.items.length;
        let index = 1;
        this.items.forEach(item =>{
            _menuWidth += item.width;
            console.log(_menuWidth,'_menuWidth')
            if(_menuWidth > menuWidth || (_menuWidth + 56 > menuWidth && len > index )){
              item.hide = true;
              _subItems.push(item);
            }
            else {
              item.hide = false;
            }
            index++;
        })
        this.subItems = _subItems;*/
    }
  }
};
</script>